<template>
	<div class="list-load-custom">
		<div class="list-box" ref="container">
			<van-cell title="单元格" value="内容" v-for="item in len" :key="item" />
		</div>
	</div>
</template>

<script>
import { scrollLoadCustom, unBindLoad } from '@/utils/scrollLoad.js';

export default {
	name: 'listLoadCustom',
	data() {
		return {
			len: 0,
			scroll: {
				loading: false,
				loadEnd: false,
			},
		};
	},
	mounted() {
		scrollLoadCustom(this.$refs['container'], this.request, this.scroll);
	},
	beforeDestroy() {
		unBindLoad(this.$refs['container']);
	},
	methods: {
		request() {
			setTimeout(() => {
				if (this.len < 50) {
					this.len = this.len + 10;
					console.log(this.len);
					this.scroll.loading = false;
				} else {
					// 所有数据加载完成
					this.scroll.loading = false;
					this.scroll.loadEnd = true;
				}
			}, 500);
		},
	},
};
</script>

<style scoped lang="scss">
.list-box {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translate(-50%, 0);
	height: 300px;
	width: 320px;
	overflow: auto;
	border: 1px solid #ccc;
}
</style>
